<!DOCTYPE html>
<html>
	<head>
		<title>xui specs</title>
        <meta name="viewport" content="width=device-width" />
		<link rel="stylesheet" href="../packages/qunit/qunit/qunit.css" type="text/css" media="screen" title="no title" charset="utf-8">
		<script src="../packages/qunit/qunit/qunit.js" type="text/javascript" charset="utf-8"></script>
		<!-- make sure you include the proper build of XUI -->
		<script src="../lib/xui-bb-2.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="tests/core-tests.js" type="text/javascript"></script>
		<style>
			h2#qunit-banner {
				text-align:center;
				height: auto;
			}
			#test-elements {
				display:none;
			}
		</style>
        <script type="text/javascript">
            // For, you guessed it, BlackBerries :)
            if (!Array.prototype.indexOf) {
                Array.prototype.indexOf = function(elt /*, from*/) {
                var len = this.length;
                var from = Number(arguments[1]) || 0;
                from = (from < 0)
                     ? Math.ceil(from)
                     : Math.floor(from);
                if (from < 0)
                  from += len;
                for (; from < len; from++)
                {
                  if (from in this &&
                      this[from] === elt)
                    return from;
                }
                return -1;
                };
            }
        </script>
	</head>
	<body onload="new CoreTests().run();">
		<h2 id="qunit-banner">xui specs</h2>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>
		<ol id="qunit-testrunner-toolbar"></ol>
		
		<div id="test-elements">
            <div id="find_tests">
                <div class="foo">first</div>
                <div id="find_tests_inner">
                    <div class="foo">second</div>
                </div>
            </div>
			<div id="selector_tests">
			  <ul id="items">
				<li class="item" id="item_1">this is item one</li>
				<li class="item" id="item_2">this is item two</li>
				<li class="item" id="item_3">this is item three</li>
			  </ul>
			  <form id="form_1">
  			      <input type="text" id="text_input_1" value="test" />
  			      <input type="checkbox" id="checkbox_input_1" value="test" />
  		      </form>
			</div>

			<div id="style_tests">
			  <p id="set-style-element">element for testing setStyle</p>
			  <p id="get-style-element" style="background-color:#0000FF;">element for testing getStyle</p>
			  <p id="add-class-element">element for testing addClass</p>
        <p id="has-class-element" class="foo bar">element for testing hasClass</p>
        <span class="for-has"></span>
        <span id="for-has"></span>
        <p class="foo bar"></p>
        <p class="multi has"></p>
        <p class="multi has"></p>
        <p class="has"></p>
			  <p id="remove-class-element" class="foo bar baz">element for testing removeClass</p>  
			  <p id="toggle-class-element" class="foo bar"></p>
			</div>

			<div id="dom_tests">
				<div id="html-test-inner"></div>
				<div id="html-test-outer"></div>
				<div id="html-test-top"><p>existing text should stay here</p><div id="miniCartHeader"></div></div>
				<div id="html-test-bottom"><p>existing text should stay here</p></div>
				<div id="html-test-html"><p>foo</p></div>
				<ul id="html-list-test"></ul>
				<div id="html-complex-test"></div>
        <input type="checkbox" id="first-check" name="first-check" value="one" />
        <input type="text" id="text_input" value="initial value" />
        <div id="remove-me"></div>
        <div id="remove-me-2"></div>
        <input type="password" id="p" name="p" value="initial" />
			</div>

			<div id="xhr_tests">
			  <div id="xhr-test-function"></div>
			  <div id="xhr-test-json">
				<div id="json-id">no id here</div>
					<div id="json-name">no name here</div>
			  </div>
			  <div id="xhr-test-form"></div>
			</div>

			<div id="event_tests">
			  <div id="event-test-click"></div>
			</div>

			<div id="extention_tests">
			  <div id="extention-test">xui has been extended!</div>
			</div>

			<ul id="get_tests">
				<li class="foo">first</li>
				<li class="bar">second</li>
				<li>third</li>
			</ul>

			<ul id="has_tests">
			  <li class="foo">one</li>
			  <li>two</li>
			  <li class="foo">three</li>
			  <li>four</li>
			  <li>five</li>
			</ul>
            
      <div id="tween-tests">
        <div id="square" style="position:relative;left:0px;top:0px;width:50px;height:50px;background-color:red;"></div>
        <div id="square_neg" style="position:absolute;left:0px;top:0px;width:50px;height:50px;background-color:green;"></div>
        <div id="square_dom" style="margin-top:10px;height:50px;width:50px;background-color:blue;"></div>
        <div id="square_dom_two" style="margin-left:20px;height:50px;width:50px;background-color:black;"></div>
      </div>
		</div>
</body>
</html>
